{extend name="public:layout" /}
{block name='title'}石油化工商务圈{/block}
{block name='head'}
<link rel="stylesheet" href="/public/plugins/emoji/lib/css/jquery.mCustomScrollbar.min.css"/>
<link rel="stylesheet" href="/public/plugins/emoji/dist/css/jquery.emoji.css"/>
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
<style>
    .topbar{background:#333;color:#fff;padding:10px 8px 6px 8px;}
    .mcm-head { background: #fff;border-bottom:1px solid #e8e8e8}
    .mcm-head .head-left .link, .mcm-head .head-right .link{color:#333;}
    .mcm-head .head-title{color:#333;}
</style>
{/block}
{block name="body"}
<div class="mcm-head">
    <div class="head-left">
        <a href="javascript:history.back(-1)" class="link">
            <span class="iconfont icon-zuoyou1"></span>
        </a>
    </div>
    <div class="head-title">
        内容详情
    </div>
</div>
<div style="height:50px;"></div>
<div class="circleinfo-list" id="list">
    <div class="info-item">
        <div class="thumb">
            <img src="{$info.member_avatar}" alt="">
        </div>
        <div class="infobox">
            <div class="name">
                <a href="javascript:;" class="name-link">{$info.member_truename}</a>
                <a href="javascript:;" class="action-icon">
                    <span class="iconfont icon-sanjiaojiantoutriangular"></span>
                </a>
                {eq name="info.member_id" value="$memberId"}
                <div class="info-action">
                    <a href="javascript:;" class="link" onclick="del()">
                        删除
                    </a>
                </div>
                {else}
                <div class="info-action">
                    <a href="javascript:;" class="link" onclick="setAttention(0,this)">
                        {gt name='info.is_attention' value=0}
                        取消收藏
                        {else}
                        收藏
                        {/gt}
                    </a>
                    <a href="javascript:;" class="link" {gt name='info.is_attention' value=0} style="display: none" {/gt} onclick="setAttention(1,this)">屏蔽</a>
                </div>
                {/eq}
            </div>
            <div class="info-text">
                {$info.theme_name}
            </div>
            <div class="info-imgs">
                {volist name="info.theme_image" id="vo"}
                <img src="{$vo}" alt="">
                {/volist}
            </div>
            <!--<div class="info-link-block">-->
            <!--<div class="imgbox">-->
            <!--<img src="http://www.suibiyiji.com/uploads/allimg/170612/1-1F612111020163.jpg" alt="">-->
            <!--</div>-->
            <!--<div class="text ui-flex ui-flex-align-center">-->
            <!--时光总是像指间透过的细沙-->
            <!--</div>-->
            <!--</div>-->
            <div class="info-after">
                <div class="date">{$info.create_time|date='Y-m-d H:i:s',###}</div>
                <div class="source">来自 <a  onclick="setCircle('{$info.circle_id}')" class="link">{$info.circle_name}</a></div>
                <div class="comment-action">
                    <a  onclick="setLike('{$info.theme_id}')" class="link"><img src="/public/home/bus/image/laud.jpg" alt="">赞</a>
                    <a href="javascript:;" class="link link-comment" data-replyid="0">
                        <img src="/public/home/bus/image/comment.jpg" alt="">评论</a>
                </div>
                <div class="comment-icon" id="comment-icon"></div>
            </div>
            <div class="info-comment">
                <div class="laud-box" id="like">
                    {if count($info.like_list)}
                    <img src="/public/home/bus/image/l.png" class="laud-icon" alt="">
                    {volist name="info.like_list" id="vo"}
                        <a href="" class="name-link">{$vo.member_name}</a>，
                    {/volist}
                    ...
                    {/if}
                </div>
                <div class="comtent-info" id="reply">
                </div>
                <div id="page"></div>
            </div>
        </div>
    </div>
</div>
<!--全屏popup 发表评论-->
<div id="commentbox" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <input type="hidden" id="reply_id">
        <div id="editor" class="comment-textarea" contenteditable="true"></div>
        <a id="btn" href="javascript:;" class="emoji-btn"></a>
        <a href="javascript:;" class="weui-btn weui-btn_primary submit-btn" onclick="sendReply()">发送</a>
        <a href="javascript:;" class="del-comment close-popup">取消评论</a>
    </div>
</div>
{/block}
{block name='js'}
<script src="/public/plugins/emoji/lib/script/highlight.pack.js"></script>
<script src="/public/plugins/emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<script src="/public/plugins/emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
<script src="/public/plugins/emoji/dist/js/jquery.emoji.min.js"></script>
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/html" id="like-tpl">
    {{ if data.length}}
    <img src="/public/home/bus/image/l.png" class="laud-icon" alt="">
    {{ each data as v}}
    <a href="" class="name-link">{{ v.member_name}}</a>，
    {{ /each}}
    ...
    {{ /if}}
</script>
<script type="text/html" id="reply-tpl">
    {{ each data as reply}}
    <p id="{{ reply.reply_id}}" class="link-comment" data-replyid="{{ reply.reply_id}}">
        <a href="jareplyascript:;" class="name-link">{{ reply.member_name}}</a>
        <span class="name-spill">：</span>{{ reply.reply_content}}</p>
        {{ each reply.reply as v}}
            <p><a href="javascript:;" class="name-link">{{ v.member_name}}</a><span class="name-reply"></span>回复
                <a href="#{{ v.reply_replyid}}" class="name-link">{{ v.reply_replyname}}</a>
                <span class="name-spill">：</span>{{ v.reply_content}}
            </p>
        {{ /each}}
    {{ /each}}
</script>
<script>
    $(function () {
        var obj = $('.circleinfo-menu');
        var height = obj.offset();
        $(window).scroll(function () {
            $(".comment-action").hide();
            $(".info-action").hide();
            var pos = $(window).scrollTop();
            if (pos > height) {
                obj.addClass('circleinfo-fixed');
            } else {
                obj.removeClass('circleinfo-fixed');
            }
        });
    });
    /*点赞评论显示*/
    $('#comment-icon').on('click',function (e) {
        var obj = $(this).prev();
        obj.toggle();
        $(document).one("click", function () {
            $(".comment-action").hide();
        });
        e.stopPropagation();
    });
    /*信息操作显示*/
    $(".action-icon").on("click", function (e) {
        var obj = $(this).next();
        obj.toggle();
        $(document).one("click", function () {
            $(".info-action").hide();
        });
        e.stopPropagation();
    });
    $('#list').on('click','.link-comment',function () {
        $('#reply_id').val($(this).data('replyid'));
        $("#commentbox").popup();
        $("#editor").focus().html('').emoji({
            button: "#btn",
            showTab: false,
            animation: 'slide',
            icons: [{
                name: "QQ表情",
                path: "/public/plugins/emoji/dist/img/qq/",
                maxNum: 91,
                excludeNums: [41, 45, 54],
                file: ".gif"
            }]
        });

    });
    // 页数
    var data = {page: 0, theme_id: '{$Request.param.theme_id|default=0}'};
    // dropload
    var drop=$('#page').dropload({
        domDown:{
            domClass : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad : '<div class="dropload-load">○加载中...</div>',
            domNoData : '<div class="dropload-noData">到底了</div>'
        },
        scrollArea: window,
        loadDownFn: function (me) {
            var _=this;
            this.domDown.domNoData='<div class="dropload-noData">到底了</div>';
            data.page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                url: "{:url('getThreply')}",
                data: data,
                success: function (res) {
                    if (data.page>=res.last_page){
                        if (res.total==0){
                            _.domDown.domNoData='<div class="dropload-noData">暂无评论</div>'
                        }
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html=template('reply-tpl',res);
                    $('#reply').append(html);
                    me.resetload();
                },
                error: function (xhr, type) {
                    layer.open({
                        content: '加载出错'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    // 锁定
                    me.lock();
                    // 无数据
                    me.noData();
                    me.resetload();
                }
            });
        }
    });
    function setLike(theme_id) {
        $.post('{:url("setLike")}',{theme_id:theme_id},function (res) {
            layer.open({
                content: res.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            if (res.code){
                var html=template('like-tpl',res);
                $('#like').html(html);
            }
        })
    }
    function sendReply() {
        var theme_id="{$info.theme_id}";
        var reply_id=$('#reply_id').val();
        var reply_content=$('#editor').html();
        $.post('{:url("replay")}',{theme_id:theme_id,reply_content:reply_content,reply_replyid:reply_id},function (res) {
            layer.open({
                content: res.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            if (res.code){
                $.closePopup();
                data.page=0;
                $('#reply').empty();
                drop.noData(false);
                drop.unlock();
                drop.resetload();
            }
        })
    }
    function setAttention(type,obj) {
        $.post('{:url("attention")}',{theme_id:'{$info.theme_id}',type:type},function (res) {
            layer.open({
                content: res.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            if (res.code){
                if (type){
                    location.href='{:url("index")}'
                }else {
                    var text=$(obj).text();
                    $(obj).text(text=='收藏'?'取消收藏':'收藏').next().toggle();
                }
            }
        })
    }
    function del() {
        $.post('{:url("del")}',{theme_id:'{$info.theme_id}'},function (res) {
            if (res.code){
                location.href='{:url("index")}'
            }else {
                layer.open({
                    content: res.msg
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
        })
    }
</script>
{/block}